<template>
  <div class="box">
    <div class="top">
        <div class="back"></div>
        <div class="math"></div>
    </div>
    <div class="nav">
        <h2 v-for="(item , index) in arr" :key="index" @click="change(index)" :class="`${index == indexs ? 'down' : ''}`">{{item}}</h2>
    </div>
    <main>
        <div class="left">
            <ul>
                <li v-for="(item , index) in nav" :key="index"  @click="add(item ,index)" :class="`${index == num ? 'change' : ''}`">{{item.name}}</li>
            </ul>
        </div>
        <div class="right">
            <div class="show" v-if="(newlists.length == 0)">
                <div class="list" v-for="(item , index) in nav" :key="index">
                    <div class="lists" v-for="(itemson , indexson) in item.list" :key="indexson">
                        <img src="" alt="">
                        <div class="text">
                            <h5>{{itemson.name}}</h5>
                            <p>{{itemson.text}}</p>
                            <div class="bottom">
                                <div class="money">{{itemson.money}}</div>
                                <button>+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="show1" v-if="(newlists.length != 0)">
                <div class="lists" v-for="(item , index) in newlists" :key="index">
                        <img src="" alt="">
                        <div class="text">
                            <h5>{{item.name}}</h5>
                            <p>{{item.text}}</p>
                            <div class="bottom">
                                <div class="money">{{item.money}}</div>
                                <button>+</button>
                            </div>
                        </div>
                </div> 
            </div>
        </div>
    </main>
  </div>
</template>

<script>
export default {
    name : 'box' ,
    data(){
        return {
            num:0,
            arr:['点餐' , '我的' , '订单'],
            nav:[
                {name:'热销' , list:[{id:1 , money:30 , name : '大闸蟹' , text:'吃了以后比刘翔快，比姚明高'}]},
                {name:'三文鱼' , list:[{id:1 , money:30 , name : '三文鱼', text:'吃了以后比刘翔快，比姚明高'}]},
                {name:'刺身' , list:[{id:1 , money:30 , name : '刺身', text:'吃了以后比刘翔快，比姚明高'}]},
                {name:'年货礼包' , list:[{id:1 , money:30 , name : '年货礼包', text:'吃了以后比刘翔快，比姚明高'}]},
                {name:'大虾' , list:[{id:1 , money:30 , name : '大虾', text:'吃了以后比刘翔快，比姚明高'}]},
                {name:'冷冻区' , list:[{id:1 , money:30 , name : '冷冻区', text:'吃了以后比刘翔快，比姚明高'}]},
                {name:'贝克落泪' , list:[{id:1 , money:30 , name : '贝克落泪', text:'吃了以后比刘翔快，比姚明高'}]},
                {name:'鲜虾活鱼' , list:[{id:1 , money:30 , name : '鲜虾活鱼', text:'吃了以后比刘翔快，比姚明高'}]},
            ],
            newlists:[],
            indexs:null,
            num:null
        }
    },
    methods:{
        change(index){
            this.indexs = index
        },
        add(item , index){
            if(this.num == index){
                this.num = null
                this.newlists = []
            }else{
                this.num = index
                this.newlists = []
                this.newlists.push(...item.list)
            }
        }

    }
}
</script>

<style scoped>
.box{
    height: 800px;
    width: 500px;
    margin: auto;
    display: flex;
    flex-direction: column;
}
.top{
    height: 50px;
    display: flex;
}
.nav{
    display: flex;
    height: 50px;
    display: flex;
    justify-content: space-around;
}
.nav h2{
    line-height: 50px;
    width: 100px;
    text-align: center;
}
.nav .down{
    box-sizing: border-box;
    border-bottom: 2px solid blue;
}
main{
    flex: 1;
    display: flex;
}
.left{
    width: 120px;
    height: 100%;
    overflow: auto;
}
.left li{
    line-height: 50px;
    text-align: center;
}
.left .change{
    box-sizing: border-box;
    border-left: 2px solid orangered;
}
.right{
    height: 700px;
    overflow-y: auto;
    width: 100%;
}
.right .show{
    width: 100%;
}
.right .show1{
    width: 100%;
}
.right .list{
    width: 100%;
    height: 100px;
}
.right .lists{
    width: 95%;
    height: 100px;
    margin-top: 10px;
    display: flex;
}
.right .lists .bottom{
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}
.text{
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}
</style>